<template>
  <s-layout :tabbarshow="false"  id="layout" navbar="normal" :title="'我的员工'"  :autoBack="true" 
  :leftIconColor="`${headstate.color}`"  :bgColor="headstate.bgColor" 
  :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx',fontWeight:'600',zIndex:'99999' }" 
  >
  <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/wodeyuangong_bg@2.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
    <!-- 搜索框 -->
    <view class="SearchBox">
      <s-search-keyword :placeholder="'搜索员工名字'" @searchKeyWord="searchKeyWord"></s-search-keyword>
    </view>
  </view>
    <view class="situation">
      <view class="situation_title">
        <text class="name">员工概括</text>
        <text class="time">统计截至{{timestamp}}</text>
      </view>
      <view class="situation_cont">
        <view class="item" @tap="goUrlStafflist('普通用户',1,'=')">
          <view class="item-num blue">{{ statistics.user_num}}</view>
          <view class="name">普通用户</view>
        </view>
        <view class="item"  @tap="goUrlStafflist('临时工',9,'=')">
          <view class="item-num green">{{ statistics.temp_num}}</view>
          <view class="name">临时工</view>
        </view>
        <view class="item"   @tap="goUrlStafflist('派遣工',10,'=')">
          <view class="item-num pink">{{ statistics.temp_num}}</view>
          <view class="name">派遣工</view>
        </view>
        <view class="item"  @tap="goUrlStafflist('外包工',13,'=')">
          <view class="item-num blue">{{ statistics.epiboly_num}}</view>
          <view class="name">外包工</view>
        </view>
        <view class="item"  @tap="goUrlStafflist('员工',2,'in')">
          <view class="item-num green">{{ statistics.staff_num}}</view>
          <view class="name">员工</view>
        </view>
        <view class="item"  @tap="goUrlStafflist('总人数','','in')">
          <view class="item-num yellow">{{ statistics.total_num}}</view>
          <view class="name">总人数</view>
        </view>
      </view>
    </view>

      <fui-sticky range :top="`${safeAreaInsets?.top + 44}`" >
        <view class="fui-title"  :style="{width: `${headstate.width}`}">
        <view class="dropdown">
          <view class="dropdown_name">
            <up-text :suffixIcon="state.suffixIcon" @click="dropdownStatus" :text="dropstatusname"></up-text>
          </view>
          <view class="dropdown_name">
            <up-text :suffixIcon="state.suffixIcons" @click="dropdownSex" :text="dropsexname"></up-text>
          </view>
        </view>
        </view>
        <template v-slot:content>
        <view class="comprehensive contents"  v-if="list.length">
 
          <view class="item_wrap">
            <view class="item" v-for="(item, index) in list" :key="index" @click="lookStaffDetail(item)">
              <view class="item_left">
                <up-avatar :src="`${baseUrl}` + item.avatar" shape="circle" size="60"></up-avatar>
                <view class="item_left_box">
                  <view class="name">
                    <text :class="item.is_entry == 0 ? 'status' : item.is_entry == 1 ? 'blue' : 'gray'"> {{ item.is_entry == 0 ? '未入职' : item.is_entry == 1 ? '已入职' : item.is_entry == 2 ? '已离职' : '' }} </text>
                    <view>{{ item.nickname }}</view>
                  </view>
                  <view class="title">{{ item.group.name }} <view class="line"></view> {{ item.gender == 0?'女':item.gender == 1?'男':'无' }}</view>
                </view>
              </view>
              <view class="item_right">
                <u-icon size="20" name="arrow-right" color="#0038F7"></u-icon>
              </view>
            </view>

          </view>
   
          <view>
            <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
              ref="loadmoreRef"></s-loadmore-gather>
          </view>
      
      </view>
        <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"
         ></u-empty>
        </template> 
        </fui-sticky>

  <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择状态" @close="showStatus = false"
    @select="statusSelect" :round="18" :closeOnClickAction="true">
  </up-action-sheet>
  <up-action-sheet :show="showSex" :actions="showSexActions" title="请选择性别" @close="showSex = false" @select="sexSelect"
    :closeOnClickAction="true" :round="18">
  </up-action-sheet>
</s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad, onPageScroll, onReachBottom,onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from 'vue';
const { safeAreaInsets } = uni.getSystemInfoSync()
const timestamp = new Date().toISOString().slice(0, 10)
// 列表内容
const goUrlStafflist =(e,a,s)=>{
  sheep.$router.go('/subpackage/staff/workbench/staff/my_staff_list', {
    name: e,
    group_id:a,
    op:s
  });
}
const state = ref({
  bgColor: '#fff',
  suffixIcon: 'arrow-down-fill',
  suffixIcons: 'arrow-down-fill',
})
const text = ref("新增拜访");
onLoad((options) => {
  list.value = [];
  getEntryStaff()

})
//下拉数据
const showSex = ref(false)
const showStatus = ref(false)
const dropdownStatus = () => {
  showStatus.value = true
  state.value.suffixIcon = 'arrow-up-fill'
}
const dropdownSex = () => {
  showSex.value = true
  state.value.suffixIcons = 'arrow-up-fill'
}

const dropstatusname = ref('在职状态')
const dropsexname = ref('性别')
const showSexActions = ref([
  { name: '全部性别', gender: '' },
  { name: '男', gender: 1 },
  { name: '女', gender: 0 },
])
const showStatusActions = ref([
{ name: '全部状态', is_entry: '' },
  { name: '未入职', is_entry: 0 },
  { name: '已入职', is_entry: 1 },
  { name: '已离职', is_entry: 2 },
])
// 定义方法  状态
const is_entry = ref()
function statusSelect(e) {
  is_entry.value = e.is_entry
  dropstatusname.value = e.name
  state.value.suffixIcon = 'arrow-down-fill'
  showStatus.value = false
  list.value = []
  listpagenumber.value = 1
  getEntryStaff()
}
//性别
const gender = ref()
function sexSelect(e) {
  gender.value = e.gender
  dropsexname.value = e.name
  state.value.suffixIcons = 'arrow-down-fill'
  showSex.value = false
  list.value = []
  listpagenumber.value = 1
  getEntryStaff()
}
//数据请求
const list = ref([])
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
//统计数
const statistics = reactive({
  staff_num: '',
  temp_num: '',
  total_num: '',
  epiboly_num:'',
  dispatch_num:''
})
const getEntryStaff = async () => {
  let params = {
    filter: JSON.stringify({
      is_entry: is_entry.value,
      gender: gender.value,
      nickname: keywords.value
    }),
    op: JSON.stringify({
      is_entry: '=',
      gender: '=',
      nickname: 'LIKE'
    }),
    page: listpagenumber.value,
  };
  const res = await sheep.$api.user.getEntryStaff(params);
  list.value = [...list.value, ...res?.data.rows];
  listPage.value = res.data.current_page
  listlast_page.value = res.data.last_page

  statistics.staff_num = res?.data.staff_num
  statistics.temp_num = res?.data.temp_num
  statistics.user_num = res?.data.user_num
  statistics.total_num = res?.data.total_num
  statistics.epiboly_num = res?.data.epiboly_num 
  statistics.dispatch_num = res?.data.dispatch_num
}

// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  width:''

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
    headstate.value.width = '100%'
  } else {
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
    headstate.value.width = 'calc(100% - 40rpx);'
  }
});
// 加载更多
const loadmoreRef = ref()

onReachBottom((e)=>{
  loadmoreRef.value.PopupScrolltolower() // 加载更多
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
   
  } else {
    return;
  }
  getEntryStaff()
})
onPullDownRefresh(() => {
  // listpagenumber.value = 1
  list.value = []
    getEntryStaff()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 500);
})

//搜索
const keywords = ref()
const searchKeyWord = (srarch_value) => {
  keywords.value = srarch_value
  list.value = []
  listpagenumber.value = 1
  getEntryStaff()

}

//查看详情
const lookStaffDetail = (item) => {
  sheep.$router.go('/subpackage/staff/workbench/staff/my_staff_detail', {
    ids: item.id,
  });
}
</script>

<style lang="scss" scoped>
  @import '../compentns/up_sheet.scss';
.app {
      width: 100%;
      height: auto;
  }

  ::v-deep .uni-popup__wrapper {
      flex: 1;
      width: 100vw !important;
  }

  .content {
      padding: 80rpx 40rpx 10rpx 40rpx;
      box-sizing: border-box;
      // height: 540rpx;
      width: 100%;

  .title {
      color: rgb(84, 119, 255);
      font-size: $uni-font-size-base;
      background-color: rgb(246, 248, 255);
      text-align: center;
      padding: 20rpx;
      border-radius: 10rpx;
  }

  .center {
      border-bottom: 1px solid #e5e5e5;
  }

  .text {
      color: rgb(153, 153, 153);
      font-size: $uni-font-size-base;
  }

  .bottom {
      display: flex;
      justify-content: space-between;
  }

  .btnArr {
      display: flex;
  }
  }

  .flex {
      display: flex;
      // margin-left: 10rpx;
  }

  .box_view {
      display: flex;

  image {
      width: 50rpx;
      height: 50rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
  }
  }

  .list_bottom {
      width: calc(100% - 40rpx);
      height: 68vh;
      margin: 0 auto;
      background: $uni-bg-color;
      border-radius: 20rpx;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  }

  // 搜索框
  .SearchBox {
      width: calc(100% - 40rpx);
      height: 72rpx;
      margin: 240rpx auto 20rpx auto;
  }

  // 弹出框
  .popup_box {
      width: 100%;
      height: 50%;
      background-color: $uni-bg-color;
      border-top-right-radius: 30rpx;
      border-top-left-radius: 30rpx;
      text-align: center;

      .title {
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          background: #efefef;
          color: #333;
          font-size: $uni-font-size-base;
          border-top-right-radius: 30rpx;
          border-top-left-radius: 30rpx;
      }

      .name {
          width: 100%;
          height: 18vh;

          .list {
              width: 100%;
              height: 80rpx;
              line-height: 80rpx;
              background-color: $uni-bg-color;
              color: #666;
              font-size: 26rpx;
          }

          .list_loading {
              width: 100%;
              height: 80rpx;
              line-height: 80rpx;
              color: #999;
              font-size: 26rpx;
              background-color: $uni-bg-color;
              border-top: 1rpx solid #efefef;
          }
      }
  }

  .loading-text {
      text-align: center;
      font-size: $uni-font-size-base;
      color: #666;
      padding: 20rpx 0;
  }

  scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
  }
  page {
  width: 100%;
  height: 100%;
  }

  #app {
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  }
  :deep(.u-icon__icon) {
  background: #ffffff;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;
  }

  // 分类选项
  .situation{
    width: calc(100% - 40rpx);
    margin: 20rpx auto;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    .situation_title{
      padding: 0 10rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      color: #333333;
      font-weight: 600;
      font-size: 34rpx;
      position: relative;
      .name{
        margin-left: 30rpx;
      }
      &::before{
        content:'';
        position: absolute;
        left: 20rpx;
        top: 22rpx;
        z-index: 999;
        width: 8rpx;
        height: 46rpx;
        border-radius: 7rpx;
        background-color: #0038F7;

      }
      .time{
        color : #333333;
        font-weight: 500;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
    .situation_cont{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
      .item{
        width: 210rpx;
        height: 150rpx;
        border-radius: 16rpx;
        background-color: #EDF4FF;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .item-num{
          color: #378CEE;
          font-weight: 600;
          font-size: 50rpx;
        }
        .name{
          color: #333333;
          font-weight: 500;
          font-size: 28rpx;
        }
        &:nth-child(2){
          background-color: #EBFFF1;
          .item-num{
            color: #338300;
          }
        }
        &:nth-child(3){
          background-color: #FEF2F4;
          .item-num{
            color: #D4574C;
          }
        }
        &:nth-child(4){
          background-color: #EAFCFF;
          .item-num{
            color: #378CEE;
          }
        }
        &:nth-child(5){
          background-color: #F6FEF0;
          .item-num{
            color: #58A122;
          }
        }  &:nth-child(6){
          background-color: #FFF9E9;
          .item-num{
            color: #DE9D09;
          }
        }
      }
    }
  }    
//列表
.dropdown {
      width: 90%;
      margin: 0 auto;
    }
.contents {
    width: calc(100% - 40rpx);
    margin: 0rpx auto 10rpx auto;
    background: $uni-bg-color;
    border-bottom-left-radius: 18rpx;
    border-bottom-right-radius: 18rpx;
    padding-bottom: 6rpx;
  }  
.fui-title{
  width: calc(100% - 40rpx);
    margin: 0rpx auto; 
  background-color: #FFFFFF;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
  .loading-text {
  text-align: center;
  font-size: $uni-font-size-base;
  color: #666;
  padding: 20rpx 0 50rpx;
}

// 列表内容
.item_wrap {
  // background: $uni-bg-color;

  .item {
    justify-content: space-between;
    display: flex;
    margin: 0 30rpx;
    border-bottom: 1rpx solid #efefef;
    align-items: center;

    &:last-child {
      border: none;
    }

    .item_left {
      //width: 75%;
      padding: 25rpx 0 25rpx 10rpx;
      font-family: PingFangSC;
      color: $uni-text-color;
      display: flex;
      align-items: center;

      .item_left_box {
        margin-left: 16rpx;

        .name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 30rpx;

          .status {
            margin-right: 10rpx;
            border-radius: 18rpx;
            background-color: #FEF3E6;
            color: #F77500;
            padding: 3rpx 16rpx;
            font-weight: 500;
            font-size: 22rpx;
          }

          .blue {
            margin-right: 10rpx;
            color:#0038F7;
            font-weight: 500;
            font-size: 22rpx;
            padding: 3rpx 16rpx;
            border-radius: 18rpx;
            background-color: #F9FAFF;
          }

          .gray {
            margin-right: 10rpx;
            color: #333;
            font-weight: 500;
            font-size: 22rpx;
            padding: 3rpx 16rpx;
            border-radius: 18rpx;
            background-color: #EFEFEF;
          }
        }

        .title {
          margin-left: 16rpx;
          margin-top: 10rpx;
          color: #666666;
          font-weight: 500;
          font-size: $uni-font-size-sm;
          display: flex;
          align-items: center;
          .line{
            width: 4rpx;
            height: 30rpx;
            background-color: #e6e6e6;
            margin: 0 10rpx;
          }
        }
      }
    }

    .item_right {
      padding-right: 10rpx;
      font-family: PingFangSC;
      color: $uni-color-primary;
      font-weight: 400;
      font-size: 22rpx;
      display: flex;

      .name {
        margin-right: 6rpx;
      }
    }
  }
}

//下拉菜单
.dropdown {
  display: flex;
  height: 90rpx;
  align-items: center;
  border-bottom: 1rpx solid #efefef;

  .dropdown_name {
    width: 50%;
    color: #666666;
      font-weight: 400;
      font-size: 24rpx;
    :deep(.u-icon__icon){
      font-size: 22rpx !important;
      color: #666666 !important;
    }
    :deep(.u-text) {
      justify-content: center !important;
    }
  }
}
:deep(.navbar) {
      .u-icon__icon {
          background: #fff;
          width: 64rpx;
          height: 64rpx;
          justify-content: center;
          border-radius: 50%;
          color: #333 !important;
        } 
    }
:deep(.u-empty){
  width: calc(100% - 40rpx);
  margin: 0 auto 10rpx auto;
  background: #fff;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  padding-bottom: 30rpx;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
</style>